<!-- html -->
<template>
  <h2 class="h2">toRaw，获取一个代理对象的原始对象</h2>
  <span class="span2">nums：{{ nums.num1 }}</span>
  <button class="button1" @click="changeNums">修改nums</button>
  <hr class="hr1">
  <span class="span2">numsRaw：{{ numsRaw.num1 }}</span>
  <button class="button1" @click="changeNumsRaw">修改numsRaw</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'toRawTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { reactive, toRaw } from 'vue'
//数据
let nums = reactive({ num1: 1 })
let numsRaw = toRaw(nums)
console.log('nums：', nums)
console.log('numsRaw：', numsRaw)
//方法
function changeNums() {
  nums.num1 += 1
}
function changeNumsRaw() {
  numsRaw.num1 += 1
  console.log('numsRaw.num1：', numsRaw.num1)
}
</script>

<!-- 样式 -->
<style scoped></style>